<template>
  <div class="info">
    <div class="left">
      <img :src="playlist?.coverImgUrl" alt="">
    </div>
    <div class="right">
      <h1 class="toptitle marginbottom">{{ playlist?.name }}</h1>
      <div  class="creatorinfo marginbottom">
        <el-avatar style="margin-right: 10px" :size="50" :src="playlist?.creator.avatarUrl" />
        <span style="margin-right: 10px">{{ playlist?.creator.nickname }}</span>
        <span style="margin-right: 10px" v-for="item in playlist?.tags">#{{ item }}</span>
      </div>
      <p class="description marginbottom">{{ playlist?.description }}</p>
      <div class="action">
        <el-button type="primary" round>播放全部</el-button>
        <el-button :icon="Star" round>收藏</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { PlayListDetail } from "@/models/playlist.ts"
import {
  Star,
} from '@element-plus/icons-vue'
defineProps<{
  playlist?: PlayListDetail
}>()

</script>
<style lang="less" scoped>
.info {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  .left {
    width: 200px;
    margin-right: 20px;
    img {
      border-radius: 10px;
      width: 200px;
      height: 210px;
    }
  }

  .right {
    flex: 4;
    .marginbottom{
      margin-bottom: 20px;
    }
    .toptitle {
      font-weight: 700;
    }

    .creatorinfo {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgb(148 163 184 / var(--tw-text-opacity));
    }

    .description {
      font-size: 14px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }
  }
}
</style>
